<template>
  <div class="warp-box">
    <el-row class="search-box" :gutter="10">
      <el-col :span="20">
        <el-input
          style="width:200px"
          v-model="parames.reviewer"
          size="small"
          clearable
          placeholder="搜索审批人姓名"
        ></el-input>
        <el-select clearable style="width:180px" size="small" @change="search"  v-model="parames.reviewStatus" placeholder="审核状态">
            <el-option label="已审核" value="REVIEWED"></el-option>
            <el-option label="未审核" value="UNREVIEWED"></el-option>
        </el-select>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <!-- <el-button size="small" type="text" icon="el-icon-s-open" @click="handleSearch">高级搜索</el-button> -->
      </el-col>
    </el-row>
    <el-row class="main-box channel1234" style="margin:10px -5px;">
      <el-col :span="24">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">新建报销</el-button>
      </el-col>
      <el-col :span="24">
        <el-table
          :data="tableData"
          border
          :row-class-name="tableRowClassName"
          v-loading="loading"
          style="margin-top:14px;"
        >
  
          <el-table-column
            show-overflow-tooltip
            width="300"
            fixed="left"
            prop="reimbursementContent"
            label="报销内容"
          ></el-table-column>
          <el-table-column prop="reviewer" label="审批人">
            <template slot-scope="scope">
              <div>{{scope.row.reviewer}}(工号：{{scope.row.reviewerWorkNumber}})</div>
            </template>
          </el-table-column>
          <el-table-column prop="contactName" label="报销状态">
            <template slot-scope="scope">
              <span v-if="scope.row.reviewStatus">{{scope.row.reviewStatus.desc}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="contactName" label="相关附件">
            <template slot-scope="scope">
              <div style="cursor:pointer;color:#409efe"  v-for="(item,index) in scope.row.attachmentSet" :key="index">
                <span style="margin-right:10px;" v-if="!item.imgType" @click="handleDownFile(item)">{{item.name}}</span>
                <span v-if="item.imgType" style="margin-right:10px;" @click="handleView(item)">{{item.name}}(点击预览)</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="160" align="center" fixed="right" label="" v-if="shenheBtn">
            <template slot-scope="scope">
              <div v-if="scope.row.isShowBtn" style="text-align: center">
                <el-button type="primary" @click.stop="handleRow(scope.row)" size="mini">审核报销</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <pages :parames="parames" @render="checkPage"></pages>
      </el-col>
    </el-row>
    <addCostDialog :dialogData="dialogData" @checkRender="getList"></addCostDialog>
    <imgBox :imgData="imgData"></imgBox>

  </div>
</template>

<script>
import addCostDialog from "./addCostDialog.vue"; //新建报销

export default {
  data() {
    return {
      loading: false,
      parames: {
        page: 1, //页码index
        limit: 10, //页码最大
        reviewer: '', //联系人名称
        reviewStatus: '',
        totalCount: 0,
        search: []
      },
      imgData: {
        name: '',
        url: '',
        show: false,
      },
      dialogData: {
        //新建弹窗
        type: '',
        title: '',
        show: false
      },
      tableData: [],
      shenheBtn: false
    };
  },
  components: {
    addCostDialog
  },
  methods: {
    handleSetTitle () { //设置表头列
      this.titleData.show = true
    },
    search() {
      //查询
      this.parames.page = 1;
      let searchDate = this.parames.search
      let n = 0
      this.parames.search.forEach(el=>{
        if (el.key == 'reviewer') {
          n = 1
        }
      })
      if (this.parames.reviewer && n == 0) {
        this.parames.search.push({
          key: 'reviewer',
          value: this.parames.reviewer,
          type: 'string'
        })
      } else if (this.parames.reviewer && n == 1) {
        this.parames.search.forEach((el,index)=>{
          if (el.key == 'reviewer') {
            el.value = this.parames.reviewer
          }
        })
      } else if (!this.parames.reviewer && n == 1) {
        this.parames.search.forEach((el,index)=>{
          if (el.key == 'reviewer') {
            this.parames.search.splice(index,1)
          }
        })
      }
      let b = 0
      this.parames.search.forEach(el=>{
        if (el.key == 'reviewStatus') {
          b = 1
        }
      })
      if (this.parames.reviewStatus && b == 0) {
        this.parames.search.push({
          key: 'reviewStatus',
          value: this.parames.reviewStatus,
          type: 'enumeration'
        })
      } else if (this.parames.reviewStatus && b == 1) {
        this.parames.search.forEach((el,index)=>{
          if (el.key == 'reviewStatus') {
            el.value = this.parames.reviewStatus
          }
        })
      } else if (!this.parames.reviewStatus && b == 1) {
        this.parames.search.forEach((el,index)=>{
          if (el.key == 'reviewStatus') {
            this.parames.search.splice(index,1)
          }
        })
      }
      this.getList()
    },
    handleSearch() {
      //打开高级搜索弹窗
      this.searchData.customerName = this.parames.customerName
      this.searchData.show = true;
    },
    checkSearch (value) {
      this.parames.search = value
      value.forEach(el=>{
        if(el.key == 'reviewer') {
          this.parames.reviewer = el.value
        }
      })
      this.parames.page = 1
      this.getList()
    },
    checkPage () {
      this.getList()
    },
    handleAdd() {//新建申请
      this.dialogData.type = 'new';
      this.dialogData.title = '新建报销';
      this.dialogData.show = true;
    },
    handleView (item) { //预览图片
      this.imgData.name = item.name
      this.imgData.url = item.url
      this.imgData.show = true
    },
    handleDownFile (row) { //附件下载
      window.location.href = this.$api.postReimbursementDownloadCertificate+'?name=' + row.name + '&url=' + row.url
    },
    getList() {//获取页面数据
      this.loading = true
      this.$post(this.$api.postReimbursementList,this.parames).then(response => {
        if (response.data.succeed) {
          this.parames.totalCount = response.data.totalCount
          this.tableData = response.data.data
          this.tableData.forEach(el=>{
            el.attachmentSet.forEach(bl=>{
              bl.imgType = this.$utils.getFileType(bl.url)
            })
            if((el.reviewerId == this.$utils.getLocalStorage('user').id) && el.reviewStatus.name == 'UNREVIEWED') {
              el.isShowBtn = true
            } else {
              el.isShowBtn = false
            }
          })
        }
        setTimeout(() => {
          this.loading = false
        }, 200);
      })
    },
    handleRow(row) {
      //审核报销
      this.$post(this.$api.postReimbursementReview,{
        reimbursementId: row.id
      }).then(response => {
        if (response.data.succeed) {
          this.$message({ type:'success',message: '审核成功'})
          this.getList()
        }
      })
    },
    tableRowClassName({ row, rowIndex }) {
      //斑马表格
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
      return "";
    }
  },
  mounted() {
    let buttonLimit = this.$utils.getLocalStorage('buttonlist')  //按钮缓存
    if (buttonLimit.indexOf('k065') !== -1) {
      this.shenheBtn = true
    }
    this.getList()
  }
};
</script>

<style>
.el-table .warning-row {
  background: #f9f9f9;
}
.el-table .success-row {
  background: #fff;
}
</style>